<!DOCTYPE html>
<html>
   <head>
      <!-- Update title -->
      <title>Hello Cinder: Chapter 5</title>

      <!-- keywords used for searching -->
      <meta name="keywords" content="guide, intro, tour, hello">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- reference to Cinder classes -->
         <!-- <ci seealso dox="[CLASS NAME GOES HERE]" label="[NAME OF LINK]"></ci> -->

         <!-- master stylesheet - these links will be replaced when compiled -->
      <link rel="stylesheet" href="../../_assets/css/foundation.css">
      <link rel="stylesheet" href="../../_assets/css/prism.css">
      <link rel="stylesheet" href="../../_assets/css/style.css">
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

      <!-- Place additional stylsheet links here, which will be copied over when compiled (optional) -->
      
   </head>

   <body id="guide-contents" class="language-c++">

      <!-- CONTENT STARTS HERE -->
            <h1><a class="anchor" id="personalSpace"></a>
               Personal space
            </h1>
            <p>At the end of the last section, we had a nice <code>Particle</code> emitter cursor trail. As you drag the cursor around, you leave a trail of hundreds of moving <code>Particle</code>s. Every one of those <code>Particle</code>s is responding to its initial starting velocity combined with a hint of <a class="el" href="classcinder_1_1_perlin.html">Perlin</a> noise. Each <code>Particle</code> does its thing and is oblivious to what any of the <code>Particle</code>s are doing. Until now.<br />
               <br />
               We are going to implement a very basic repulsive force to each <code>Particle</code>. Every single <code>Particle</code> will push away every other <code>Particle</code>. We will do this by giving each <code>Particle</code> an acceleration vector called <code>mAcc</code>.<br />
               <br />
               Here is how it will work. From the <code>ParticleController</code>, we will iterate through all the <code>Particle</code>s. For each <code>Particle</code>, we check it against all other <code>Particle</code>s. If those two <code>Particle</code>s are close, they will push each other away more strongly than if the two <code>Particle</code>s are on opposite sides of the app window. We add that repulsion to the respective <code>Particle</code>s' <code>mAcc</code> vectors.<br />
               <br />
               Once we have iterated through all the <code>Particle</code>s, we add the acceleration to the velocity. Then we add the velocity to the position. We decay the velocity. We reset the acceleration. And we repeat.<br />
               <br />
               The abridged version of what each <code>Particle</code> will go through looks like this: 
            </p>
            <div class="fragment">
               <div class="line">mVel += mAcc;</div>
               <div class="line">mLoc += mVel;</div>
               <div class="line">mVel *= mDecay;</div>
               <div class="line">mAcc.set( 0, 0 );</div>
            </div>
            <!-- fragment -->
            <p> <br />
               We are also adding a new variable to represent the <code>Particle</code>'s mass which is directly related to the radius. The actual relationship is a matter of personal taste. Once we make use of the mass variable, you might find you like how things behave if your <code>Particle</code>s are really massy. I like my <code>Particle</code>s a little more floaty. 
            </p>
            <div class="fragment">
               <div class="line">mMass = mRadius * mRadius * 0.005f;</div>
            </div>
            <!-- fragment -->
            <p> <br />
               This formula is not based on anything other than trial and error. I tried setting the mass equal to the radius. Didn't like that. I tried mass equal to radius squared. Didn't like that. I eventually settled on taking a fraction of the radius squared.<br />
               <br />
            </p>
            <h1><a class="anchor" id="repulsion"></a>
               Basic Repulsive Force
            </h1>
            <div class="fragment">
               <div class="line"><span class="keywordtype">void</span> ParticleController::repulseParticles() {</div>
               <div class="line">  <span class="keywordflow">for</span>( list&lt;Particle&gt;::iterator p1 = mParticles.begin(); p1 != mParticles.end(); ++p1 ) {</div>
               <div class="line">    list&lt;Particle&gt;::iterator p2 = p1;</div>
               <div class="line">    <span class="keywordflow">for</span>( ++p2; p2 != mParticles.end(); ++p2 ) {</div>
               <div class="line">      Vec2f dir = p1-&gt;mLoc - p2-&gt;mLoc;</div>
               <div class="line">      <span class="keywordtype">float</span> distSqrd = dir.lengthSquared();</div>
               <div class="line">      </div>
               <div class="line">      <span class="keywordflow">if</span>( distSqrd &gt; 0.0f ){</div>
               <div class="line">        dir.normalize();</div>
               <div class="line">        <span class="keywordtype">float</span> F = 1.0f/distSqrd;</div>
               <div class="line">          </div>
               <div class="line">        p1-&gt;mAcc += dir * ( F / p1-&gt;mMass );</div>
               <div class="line">        p2-&gt;mAcc -= dir * ( F / p2-&gt;mMass );</div>
               <div class="line">      }</div>
               <div class="line">    }</div>
               <div class="line">  }</div>
               <div class="line">}</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Lets go through this step by step. First, you set up a for-loop that uses the <code>list</code> <code>iterator</code> to go through all the <code>Particle</code>s, one by one, in the order they are sorted in the list. 
            </p>
            <div class="fragment">
               <div class="line"><span class="keywordflow">for</span>( list&lt;Particle&gt;::iterator p1 = mParticles.begin(); p1 != mParticles.end(); ++p1 ){</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Next, we create a second <code>iterator</code> that also loops through the <code>Particle</code>s, but it starts at one <code>Particle</code> ahead of the first <code>iterator</code>'s position. Put another way, if we are on <code>Particle</code> 15 in the first <code>iterator</code>, the second <code>iterator</code> will loop through <code>Particle</code>s 16 and higher. <code>Particle</code> 16 will <code>iterate</code> through <code>Particle</code> 17 and higher, etc.<br />
               <br />
               Put yet another way, imagine that we have 3 <code>Particle</code>s. Each <code>Particle</code> wants to repel every other <code>Particle</code>. First round, p1 and p2 repel each other, and then p1 and p3 repel each other. Second round, we already handled all of p1's interactions so we move on to p2. Since p2 has already interacted with p1, all that is left is for p2 and p3 to repel each other. That is the logic for the nested <code>iterator</code>s. 
            </p>
            <div class="fragment">
               <div class="line">list&lt;Particle&gt;::iterator p2 = p1;</div>
               <div class="line"><span class="keywordflow">for</span>( ++p2; p2 != mParticles.end(); ++p2 ) {</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Now that we are inside of the second <code>iterator</code>, we are dealing with a single pair of <code>Particle</code>s, p1 and p2. We know both of their positions so we can find the vector between them by subtracting p1's position from p2's position. We can then find out how far apart they are by using <code>length()</code>. 
            </p>
            <div class="fragment">
               <div class="line">Vec2f dir = p1-&gt;mLoc - p2-&gt;mLoc;</div>
               <div class="line"><span class="keywordtype">float</span> dist = dir.length();</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Here is where we run into our first problem. To do this repulsion force, we don't need the distance between the <code>Particle</code>s. We need the distance squared. We could just multiply <code>dist</code> by <code>dist</code> and be done with it, but we have another option.<br />
               <br />
               When finding out the length of a vector, you first find out the squared distance, then you take the square root. The code for finding the <code>length()</code> looks like this: 
            </p>
            <div class="fragment">
               <div class="line">sqrt( x*x + y*y )</div>
            </div>
            <!-- fragment -->
            <p> <br />
               You should try to avoid using <code>sqrt()</code> when possible, especially inside of a huge nested loop. It will definitely slow things down as the square root calculation is much more processor-intensive than just adding or multiplying. The good news is there is also a <code>lengthSquared()</code> method we can use. 
            </p>
            <div class="fragment">
               <div class="line">Vec2f dir = p1-&gt;mLoc - p2-&gt;mLoc;</div>
               <div class="line"><span class="keywordtype">float</span> distSqrd = dir.lengthSquared();</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Next, we make sure the distance squared is not equal to zero. One of the next steps is to normalize the direction vector and we already know that normalizing a vector with a length of zero is a bad thing. 
            </p>
            <div class="fragment">
               <div class="line"><span class="keywordflow">if</span>( distSqrd &gt; 0.0f ){</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Here is the sparkling jewel of our function. First, you go ahead and normalize the direction vector. This leaves you with a vector that has a length of one and can be thought of as an arrow pointing from p2 towards p1. 
            </p>
            <div class="fragment">
               <div class="line">dir.normalize();</div>
            </div>
            <!-- fragment -->
            <p> <br />
               The first factor which determines how much push each <code>Particle</code> has on the other is the inverse of the distance squared. 
            </p>
            <div class="fragment">
               <div class="line"><span class="keywordtype">float</span> F = 1.0f / distSqrd;</div>
            </div>
            <!-- fragment -->
            <p> <br />
               Since we already know that force equals mass times acceleration (Newton's 2nd law), we can find p2's contribution to p1's total acceleration by <em>adding</em> the force divided by p1's mass. 
            </p>
            <div class="fragment">
               <div class="line">p1-&gt;mAcc += ( F * dir ) / p1-&gt;mMass;</div>
            </div>
            <!-- fragment -->
            <p> <br />
               To find out p1's contribution to p2's total acceleration, you <em>subtract</em> force divided by p2's mass. 
            </p>
            <div class="fragment">
               <div class="line">p2-&gt;mAcc -= ( F * dir ) / p2-&gt;mMass;</div>
            </div>
            <!-- fragment -->
            <p> <br />
               If this all seems confusing to you, worry not. It still confuses me from time to time. With a little bit of practice, this code will start to feel more familiar.<br />
               <br />
               Now we can turn on our repulsion. In our App class, before we tell the <code>ParticleController</code> to update all the <code>Particle</code>s, we trigger the <code>ParticleController::repulseParticles()</code> method. We can now run our code. <br />
               <br />
            </p>
            <div class="image">
               <img src="tutorial_part5_01.png" alt="tutorial_part5_01.png"/>
            </div>
            <p> <br />
               Every single Particle pushes away its neighbors which causes the <code>Particle</code>s to spread out in a really natural manner. Here is a short video of the effect in action. <br />
      <!-- END CONTENT -->

      <!-- Scripts -->
      <script src="../../_assets/js/prism.js" type="text/javascript"></script>
      <!-- Place additional scripts here (optional) -->
      <!-- <script type="text/javascript"></script> -->

   </body>
</html> 